<template>
  <div class="home">
    <div class="home-container">
      <header class="header">
        <Header />
      </header>
      <div class="tips">
        {{ $t("home.tips") }}
      </div>
      <div class="search">
        <Search />
      </div>
    </div>
    <div class="w-full mt-20 flex justify-center">
      <PlateForm />
    </div>
    <div class="w-full about-ace">
      <AboutAce />
    </div>
    <Cooperation />
    <footer class="mt-20">
      <Footer />
    </footer>
  </div>
</template>
<script setup>
import Header from "@/components/header.vue";
import Search from "@/components/search.vue";
import PlateForm from "./components/PlateForm/index.vue";
import AboutAce from "./components/aboutACE/index.vue";
import Cooperation from "./components/cooperation/index.vue";
import Footer from "@/components/footer.vue";
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;
  height: 100vh;
  // background: #f5f5f5;
  .home-container {
    width: 100%;
    height: 600px;
    background: url("@/assets/images/home/banner.png") no-repeat;
    background-size: cover;
    background-position: center; /* 确保图片在元素中心 */
    position: relative;
    .tips {
      position: absolute;
      left: 10%;
      top: 45%;
      // transform: translate(-50%, -50%);
      font-size: 16px;
      color: #fff;
      padding: 20px 10px;
      width: 370px;
      background: #013578;
      color: #fff;
    }
    .search {
      position: absolute;
      left: 10%;
      top: 75%;
      // transform: translate(-50%, -50%);
      width: 370px;
    }
  }
  .header {
    height: 80px;
  }
  .about-ace {
    margin-top: 150px;
  }
}
</style>
